<template>
  <div class="app-container">
    <!-- 搜索区域使用 collapse transition -->
    <el-collapse-transition>
      <el-card
        v-show="isFilterVisible"
        class="search-wrapper filter-card"
        shadow="hover"
      >
        <div>
          <el-form
            ref="filterForm"
            :model="listQuery"
            :inline="true"
            label-width="80px"
          >
            <el-form-item label="日期:">
              <div class="date-range-container">
                <el-date-picker
                  v-model="listQuery.startDate"
                  type="date"
                  placeholder="起始日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
                <span class="date-separator">至</span>
                <el-date-picker
                  v-model="listQuery.endDate"
                  type="date"
                  placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
              </div>
            </el-form-item>

            <el-form-item label="供应商:">
              <el-input
                v-model="listQuery.supplier"
                placeholder="请输入供应商编号或名称"
                suffix-icon="el-icon-more"
                style="width: 200px"
                clearable
              />
            </el-form-item>

            <el-form-item label="业务员:">
              <el-input
                v-model="listQuery.salesperson"
                placeholder="请输入业务员姓名"
                suffix-icon="el-icon-more"
                style="width: 150px"
                clearable
              />
            </el-form-item>

            <el-form-item label="退款状态:">
              <el-select
                v-model="listQuery.refundStatus"
                placeholder="全部"
                style="width: 120px"
                clearable
              >
                <el-option label="全部" value="" />
                <el-option label="未退款" value="unrefunded" />
                <el-option label="部分退款" value="partial" />
                <el-option label="已退款" value="refunded" />
              </el-select>
            </el-form-item>

            <el-form-item label="审核状态:">
              <el-select
                v-model="listQuery.auditStatus"
                placeholder="全部"
                style="width: 120px"
                clearable
              >
                <el-option label="全部" value="" />
                <el-option label="未审核" value="unaudited" />
                <el-option label="已审核" value="audited" />
              </el-select>
            </el-form-item>

            <el-form-item class="form-buttons">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-search"
                @click="handleFilter"
              >查询</el-button>
              <el-button
                size="small"
                icon="el-icon-refresh"
                @click="resetForm"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>

    <el-card class="main-content-card" shadow="hover">
      <!-- 报表标题 - 居中显示，添加渐变背景 -->
      <div class="report-title-container">
        <div class="report-title-centered">购货退货单历史记录</div>
      </div>
      <!-- 操作按钮区域 -->
      <div class="table-operations">
        <div class="left-operations">
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
          >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
        </div>
        <div class="right-operations">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleAdd"
          >新增</el-button>
          <el-button
            size="small"
            icon="el-icon-check"
            @click="handleAudit"
          >审核</el-button>
          <el-button
            size="small"
            icon="el-icon-printer"
            @click="handlePrint"
          >打印</el-button>
          <el-button
            size="small"
            icon="el-icon-download"
            @click="handleExport"
          >导出</el-button>
          <el-button
            size="small"
            icon="el-icon-delete"
            @click="handleDelete"
          >删除</el-button>
        </div>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        stripe
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          height: '40px',
          fontWeight: 'bold',
        }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="操作" width="100" fixed>
          <template>
            <el-button type="text" size="small" icon="el-icon-edit" />
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="单据日期"
          width="100"
          sortable
        />
        <el-table-column
          prop="orderNo"
          label="单据编号"
          width="150"
        />
        <el-table-column
          prop="supplier"
          label="供应商"
          width="200"
        />
        <el-table-column
          prop="salesperson"
          label="业务员"
          width="100"
        />
        <el-table-column
          prop="purchaseOrderNo"
          label="关联购货订单号"
          width="150"
        />
        <el-table-column
          prop="sourceOrderNo"
          label="源购货单号"
          width="150"
        />
        <el-table-column
          prop="sourceQuantity"
          label="源购货数量"
          width="100"
          align="right"
        />
        <el-table-column
          prop="quantity"
          label="数量"
          width="100"
          align="right"
        />
        <el-table-column
          prop="amount"
          label="购货金额"
          width="120"
          align="right"
        />
        <el-table-column
          prop="discountAmount"
          label="优惠后金额"
          width="120"
          align="right"
        />
        <el-table-column
          prop="paidAmount"
          label="已付金额"
          width="120"
          align="right"
        />
      </el-table>

      <!-- 合计行 -->
      <div class="summary-row">
        <span class="summary-label">合计：</span>
        <span class="summary-content" />
        <span class="summary-quantity">{{ totalQuantity }}</span>
        <span class="summary-amount">{{ totalAmount }}</span>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="listQuery.page"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PurchaseReturnOrderHistoricalDocuments',
  data() {
    return {
      isFilterVisible: false,
      listQuery: {
        page: 1,
        limit: 100,
        startDate: '',
        endDate: '',
        supplier: '',
        salesperson: '',
        refundStatus: '',
        auditStatus: ''
      },
      tableData: [], // 表格数据
      total: 0,
      totalQuantity: 0,
      totalAmount: 0
    }
  },
  methods: {
    handleFilter() {
      // 处理查询
    },
    resetForm() {
      this.$refs.filterForm.resetFields()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      // 重新加载数据
    },
    handleAdd() {
      // 处理新增
    },
    handleAudit() {
      // 处理审核
    },
    handlePrint() {
      // 处理打印
    },
    handleExport() {
      // 处理导出
    },
    handleDelete() {
      // 处理删除
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.search-wrapper {
  margin-bottom: 20px;
}

.date-range-container {
  display: flex;
  align-items: center;
}

.date-separator {
  margin: 0 5px;
}

.table-operations {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.left-operations,
.right-operations {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

// 主内容卡片
.main-content-card {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

// 报表标题容器 - 添加渐变背景
.report-title-container {
  background: linear-gradient(to right, #f7f9fb, #e8eef5, #f7f9fb);
  padding: 15px 0;
  margin: -40px -20px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

// 居中显示的报表标题
.report-title-centered {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  position: relative;

  &:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #f7f9fb, #409eff, #f7f9fb);
    border-radius: 3px;
  }
}

// 合计行样式
.summary-row {
  display: flex;
  background-color: #fdf6ec;
  padding: 12px 20px;
  font-weight: bold;
  border: 1px solid #ebeef5;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.summary-label {
  width: 80px;
  color: #e6a23c;
}

.summary-content {
  flex: 1;
}

.summary-quantity,
.summary-amount {
  width: 120px;
  text-align: right;
  color: #e6a23c;
}

// 分页容器
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

// 表格内数字列的样式
.el-table {
  .cell {
    .number-column {
      font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    }
  }
}

// 表格操作按钮
.el-button--text {
  padding: 2px 0;
  margin-right: 8px;
}
</style>
